<template>
  <div class="box">
    <button class="my-button" @click="increment">方法修改: result {{ objCount.count }}</button>
    <p/>
    <p >computed count: result {{ computedCount }}</p>
    <p />
    <button class="my-button" @click="refObjIncrement">ref obj: result {{ refObjCount.count }}</button>
  </div>
</template>

<!-- 组合式api setup语法糖 -->
<!-- 不再需要export default, setup()方法, 以及return -->
<script setup>

// ref是一个函数，可以用于将一个普通的数据类型转换成响应式数据。ref返回一个包含value属性的对象，通过修改value属性的值，可以触发组件更新。
// reactive是一个函数，用于将一个普通的对象转换成响应式数据。reactive返回一个响应式的Proxy对象，通过修改该对象的属性值，可以触发组件更新。
import { ref, reactive, computed } from 'vue'
const count = ref(0)

const refObjCount = ref({
  count: 0
})

const objCount = reactive({
  count: 0
})

// 当 objCount 有变化时重新计算
const computedCount = computed(() => {
  console.log('computed')
  return objCount.count * 2 
})

const increment = () => {
  console.log(objCount) // 这里的objCount是通过reactive转换为响应式数据的一个Proxy实例
  objCount.count++
}

const refObjIncrement = () => {
  console.log(refObjCount)
  refObjCount.value.count++

  // refObjCount.value = { count: 5 } // 相当于把一个对象赋值给refObjCount.value
}



</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.my-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
</style>
